<template>
  <div class="app">
    <h1>{{ msg }}，学生姓名是:{{ studentName }}</h1>

    <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
    <School :getSchoolName="getSchoolName" />

    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或v-on，通过事件回调） -->
    <!-- 由于v-on在Student组件标签上，给Student组件实例VC上绑定了一个事件，事件名demo，有人触发则调用m1函数 -->
    <!-- 事件触发原则：你给谁绑定了事件，就找谁触发 -->
    <!-- <Student @share="getStudentName" @demo="m1"/> -->

    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法，使用ref，灵活性很强） -->
    <!-- ref属性类似id属性实现唯一标识，ref="student"使用后，通过this.$refs.student可以获取组件实例VC，从而直接操作VC中的属性和方法 -->
    <!-- 使用js原生DOM事件，在组件中绑定原生事件，使用@click.native，就把click交给外层的一个根元素，这也是为什么vue模板中要一个根元素的原因 -->
	<Student ref="student" @click.native="show" />
  </div>
</template>

<script>
import Student from "./components/Student";
import School from "./components/School";

export default {
  name: "App",
  components: { School, Student },
  data() {
    return {
      msg: "你好啊！",
      studentName: "",
    };
  },
  methods: {
    // 获取学校名称
    getSchoolName(name) {
      console.log("App收到了学校名：", name);
    },
    // 获取学生信息，名称，ES6接收多个参数放入数组...params。
    getStudentName(name, ...params) {
      console.log("App收到了学生名：", name, params);
      this.studentName = name;
    },
    m1() {
      console.log("demo事件被触发了！");
    },
	// 在组件中绑定原生事件，使用@click.native
    show() {
      alert(123);
    },
  },

  // 生命周期钩子函数，挂载完毕后调用
  mounted() {
    // this.$refs.student等于VC，$on等于当share事件触发时，回调一个函数getStudentName
	// 这里this.getStudentName，也可以直接用箭头函数替换，但不推荐
    this.$refs.student.$on("share", this.getStudentName); //绑定自定义事件

    // this.$refs.student.$once('share',this.getStudentName) //绑定自定义事件（一次性）

    // ref实现绑定自定义事件，更灵活，比如挂载完毕后等3秒绑定，v-on实现不了。
    // setTimeout(()=>{
    // 	this.$refs.student.$on('share',this.getStudentName)
    // },3000)
  },
};
</script>

<style scoped>
.app {
  background-color: gray;
  padding: 5px;
}
</style>
